Установка скрипта «Аккордион меню»

Введение

Благодарим за покупку скрипта! Установка скриптового решения займет некоторое время. Пожалуйста, внимательно читайте инструкции и старайтесь следовать всем рекомендациям.

Стандартный функционал меню категорий интернет-магазина от системы uCoz показался недостаточно удобным или же просто не "расскрывал" всю задумку сайта, а у некоторых интернет-магазинов с большим количеством категорий вызывало сложность редактирования? Причин может быть очень много и все они нам, конечно же нам не известны, однако мы точно знаем, что каждый владелец своего интернет-магазина хочет сделать свой проект удобным и необычным. Именно с таких на первый взгляд мелочей вы сумеете создать свой собственный, неповторимый вид меню и облегчить себе его редактирование!

Вертикальное многоуровневое меню типа аккордеон, раскрывающееся по клику, с поддержкой автоматического вывода категорий интернет-магазина, стандартного меню и в формате html.

Внешний вид меню аккордеон легко изменить с помощью CSS.

Преимущества:

Поддерживает автоматический вывод категорий интернет-магазина;
Поддерживает автоматический вывод стандартного меню;
Поддерживает вывод меню через обычный html (для тех кому нужно вывести определенные пункты меню в своем порядке);
Поддержка до 4-х уровней вложенности (в интернет-магазине до 3-х уровней);
Поддерживает вывод только 20 категорий в первом уровне (лимит uCoz);
Запоминает открытые пункты и подпункты при переходе на другую страницу;
Выводится на всех модулях и страницах сайта;
Выделяет тот пункт меню в котором находится пользователь;
Работает на JQuery и cookie без использования PHP.

Перед установкой, сделайте полный бэкап шаблонов на случай, если вы в какой-то момент решите вернуть прежний вид сайту или отдельным его элементам. Сделать это можно в Панели управления » Управление дизайном » Backup шаблонов.

Первый шаг: загрузка файлов на сайт

Перейдите в Панель управления » Файловый менеджер.

В правом верхнем углу кликните на кнопку "Создать папку", введите название папки js.

Кликните на галочку и ура, мы создали папку с нужным именем!:) Теперь абсолютно идентичным действиям создайте папку, но только с названием css, и еще раз с названием в img.

Теперь зайдите в папку js и загрузите в эту папку файлы "menu_shop-site.js" и "jquery.cookie.js" из архива со скриптом (папка "скрипты").
Далее, перейдите в папку CSS и загрузите в неё все файлы, которые находятся в архиве со скриптом (папка "стили").
Далее, перейдите в папку IMG и загрузите в неё все файлы, которые находятся в архиве со скриптом (папка "иконки").

Второй шаг: размещение кода

Подключаем JavaScript:

Перейдите в Панель управления » Управление дизайном » Глобальные блоки, и в шаблоне "Нижняя часть сайта" в самом конце разместите код:

<script type="text/javascript" src="/js/jquery.cookie.js"></script>
<script type="text/javascript" src="/js/menu_shop-site.js"></script>

после чего сохраните изменения.

Обратите внимение, библиотека jquery.cookie.js используется во многих скриптах. Если вы уверены, что на вашем сайте уже подключена эта библиотека, в предыдущем коде можете удалить первую строку.

Теперь нам нужно определиться как мы будем использовать меню. Всего есть 3 варианта.
Первый вариант (для интернет-магазина):

в случае выборого этого варианта — перейдите в Панель управления » Управление дизайном » Глобальные блоки, и в шаблоне "Первый контейнер" в том месте где нужно вывести меню разместите код:

<div id="shop_left_menu">
	<?$SHOP_HMENU$('ul')?>
</div>

после чего сохраните изменения.

Для изменения порядка и вложенности категорий — перейдите в Панель управления » Интернет-магазин » Категории товаров, после чего сохраните изменения.

Поддерживается вложенность до 3 уровней.

Поддерживается вывод только 20 категорий в первом уровне.

Второй вариант (для стандартного меню):

в случае выборого этого варианта — перейдите в Панель управления » Конструктор меню, и создайте новое меню, где поле Способ отображения выбираем "Вертикальный":

после этого Вам необходимо запомнить ID меню:

после этого — перейдите в Панель управления » Управление дизайном » Глобальные блоки, и в шаблоне "Первый контейнер" в том месте где нужно вывести меню разместите код:

<div id="site_left_menu">
	$NMENU_1$
</div>

ВАЖНО! Вместо цифры 1 указываем ID меню которое запоминали.

после чего сохраните изменения.

Третий вариант (в виде html кода):

<div id="html_left_menu" class="uMenuV">
  <ul id="my-menu" class="sample-menu uMenuRoot">
    <li><a href="Указываем ссылку на страницу">Первый уровень</a>
      <ul>
        <li><a href="Указываем ссылку на страницу">Второй уровень</a>
          <ul>
            <li><a href="Указываем ссылку на страницу">Третий уровень</a>
              <ul>
                <li><a href="Указываем ссылку на страницу">Четвертый уровень</a></li>
                <li><a href="Указываем ссылку на страницу">Пункт меню</a></li>
                <li><a href="Указываем ссылку на страницу">Пункт меню</a></li>
              </ul>
            </li>
            <li><a href="Указываем ссылку на страницу">Пункт меню</a>
              <ul>
                <li><a href="Указываем ссылку на страницу">Пункт меню</a></li>
                <li><a href="Указываем ссылку на страницу">Пункт меню</a></li>
                <li><a href="Указываем ссылку на страницу">Пункт меню</a></li>
              </ul>
            </li>
            <li><a href="Указываем ссылку на страницу">Пункт меню</a>
              <ul>
                <li><a href="Указываем ссылку на страницу">Пункт меню</a></li>
                <li><a href="Указываем ссылку на страницу">Пункт меню</a></li>
                <li><a href="Указываем ссылку на страницу">Пункт меню</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a href="Указываем ссылку на страницу">Второй уровень</a>
          <ul>
            <li><a href="Указываем ссылку на страницу">Пункт меню</a>
              <ul>
                <li><a href="Указываем ссылку на страницу">Пункт меню</a></li>
                <li><a href="Указываем ссылку на страницу">Пункт меню</a></li>
                <li><a href="Указываем ссылку на страницу">Пункт меню</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="Указываем ссылку на страницу">Первый уровень</a>
      <ul>
        <li><a href="Указываем ссылку на страницу">Второй уровень</a>
          <ul>
            <li><a href="Указываем ссылку на страницу">Третий уровень</a>
              <ul>
                <li><a href="Указываем ссылку на страницу">Четвертый уровень</a></li>
                <li><a href="Указываем ссылку на страницу">Пункт меню</a></li>
                <li><a href="Указываем ссылку на страницу">Пункт меню</a></li>
              </ul>
            </li>
            <li><a href="Указываем ссылку на страницу">Пункт меню</a>
              <ul>
                <li><a href="Указываем ссылку на страницу">Пункт меню</a></li>
                <li><a href="Указываем ссылку на страницу">Пункт меню</a></li>
                <li><a href="Указываем ссылку на страницу">Пункт меню</a></li>
              </ul>
            </li>
            <li><a href="Указываем ссылку на страницу">Пункт меню</a>
              <ul>
                <li><a href="Указываем ссылку на страницу">Пункт меню</a></li>
                <li><a href="Указываем ссылку на страницу">Пункт меню</a></li>
                <li><a href="Указываем ссылку на страницу">Пункт меню</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </ul>
  </ul>
</div>

после чего сохраните изменения.

Третий шаг: установка стилей

Перейдите в Панель управления » Управление дизайном, и в шаблонах перед закрывающим тегом </head> в которых вам необходимо функционирование данного меню разместите код:

Если необходимо отображение меню на всех страницах, разместите его в одном из глобальных блоков.

<link type="text/css" rel="stylesheet" href="/css/menu_shop-site.css" />

после чего сохраните изменения.

Или вы можете скопировать стили из файла menu_shop-site.css и вставьте в свою таблицу стилей CSS.

Перейдите в Панель управления » Управление дизайном » Интернет-магазин, и в шаблоне "Таблица стилей (CSS)", удалите следующий код:

#shop-hmenu { position: relative; list-style:none; margin:0; padding:0 }
#shop-hmenu div.hmenu-item, #shop-hmenu li.hmenu-item { float:left; text-align: center; padding: 0 1px 0 1px; }
#shop-hmenu td.hmenu-item { text-align:center; padding: 0 1px 0 1px; height: 100% }
#shop-hmenu .hmenu-link { display:block; /*display:table-cell!important;*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; vertical-align: middle; padding: 0 5px 0 5px; text-align: center; text-decoration: none; font-size: 12px; font-weight:bold; background-color:white; color:#000; border: 1px solid #C2CFE0 }
#shop-hmenu .hmenu-corn { width:100%; height:0px; position:relative; display:none }
#shop-hmenu .hmenu-corn b { width:100%; height:10px; position:absolute; display:block; background: url(/.s/img/sh/vcor.png) no-repeat 50% 0; margin-top: 1px; z-index: 99 }
#shop-hmenu .hmenu-cont u { text-decoration:none }
#shop-hmenu .hmenu-cont { display: none; position: absolute; left:0; text-align:left; z-index:98; width:100% }
#shop-hmenu .hmenu-cont ol { list-style:none; padding:0 0 0 5px; background-color:white; border:1px solid #C2CFE0; padding:10px; margin-top:10px; -moz-box-shadow: 0 0 10px rgba(0,0,0,0.5); -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5); box-shadow: 0 0 10px rgba(0,0,0,0.5); }
#shop-hmenu .hmenu-cont ol li { margin:0 10px 0 0; width:200px; float:left!important; / for sort / }
#shop-hmenu .hmenu-cont div { margin: 2px 0 2px 0 }
#shop-hmenu .hmenu-cont div a { font-size:12px; color: #000; font-weight: bold; text-decoration: none }
#shop-hmenu .hmenu-cont ul { list-style:none; padding:0 0 0 10px; margin:0px }
#shop-hmenu .hmenu-cont ul li { line-height: 20px }
#shop-hmenu .hmenu-cont ul li a { font-size:12px; color: #888; text-decoration: none }
.hmenu-onhover .hmenu-item:hover .hmenu-corn { display:block!important }
.hmenu-onhover .hmenu-item:hover .hmenu-cont { display:block!important }

Четвёртый шаг: настройка и использование

У данного меню есть настройки, например class или id, с которыми работает меню, и скорость анимации открытия и закрытия пунктов меню.

Информация о классах:

var menu_animation_speed – скорость анимации открытия/закрытия пунктов меню (57 строка);

200 – значение скорости.

Настройка стилей CSS:

.uMenuV ul, #shop-hmenu ul – список с названиями пунктов меню;
.uMenuV a, #shop-hmenu a – название пункта меню;
.uMenuV li a, #shop-hmenu li a – оформление названия пункта меню;
.uMenuV li a:hover, #shop-hmenu li a:hover, – оформление названия пункта меню, при наведении курсора;
.uMenuV li .sample-menuA, #shop-hmenu .sample-menuA, – активная страница названия пункта меню / страница на которой вы находитесь;
.uMenuV li .sample-menuA:hover, #shop-hmenu li .sample-menuA:hover – оформление названия пункта меню, при наведении курсора активной страницы;
.uMenuV li ul li, #shop-hmenu li ul li – оформление рамки 2-го уровня меню ;
.uMenuV li ul li a, #shop-hmenuli ul li a – оформление названия 2-го уровня меню;
.uMenuV li ul li a:hover, #shop-hmenu li ul li a:hover – оформление названия 2-го уровня меню, при наведении курсора;
.uMenuV li ul li .sample-menuA, #shop-hmenu li ul li .sample-menuA – активная страница названия 2-го уровня меню / страница на которой вы находитесь;
.uMenuV li ul li .sample-menuA:hover, #shop-hmenu li ul li .sample-menuA:hover – оформление название 2-го уровня меню, при наведении курсора активной страницы;
.uMenuV li ul li ul li, #shop-hmenu li ul li ul li – оформление рамки 3-го уровня меню ;
.uMenuV li ul li ul li a, #shop-hmenu li ul li ul li a – оформление названия 3-го уровня меню;
.uMenuV li ul li ul li a:hover, #shop-hmenu li ul li ul li a:hover – оформление названия 3-го уровня меню, при наведении курсора;
.uMenuV li ul li ul li .sample-menuA, #shop-hmenu li ul li ul li .sample-menuA – активная страница названия 3-го уровня меню / страница на которой вы находитесь;
.uMenuV li ul li ul li .sample-menuA:hover, #shop-hmenu li ul li ul li .sample-menuA:hover – оформление названия 3-го уровня меню, при наведении курсора активной страницы;
.uMenuV li ul li ul li ul li, #shop-hmenu li ul li ul li ul li – оформление рамки 4-го уровня меню ;
.uMenuV li ul li ul li ul li a, #shop-hmenu li ul li ul li ul li a – оформление названия 4-го уровня меню;
.uMenuV li ul li ul li ul li a:hover, #shop-hmenu li ul li ul li ul li a:hover – оформление названия 4-го уровня меню, при наведении курсора;
.uMenuV li ul li ul li ul li.sample-menuA, #shop-hmenu li ul li ul li ul li.sample-menuA – активная страница названия 4-го уровня меню / страница на которой вы находитесь;
.uMenuV li ul li ul li ul li.sample-menuA:hover, #shop-hmenu li ul li ul li ul li.sample-menuA:hover – оформление названия 4-го уровня меню, при наведении курсора активной страницы;
.uMenuV .collapsed, #shop-hmenu .collapsed – иконка наличия вложенности подпункта меню;
.uMenuV .expanded, #shop-hmenu .expanded – иконка открытия пункта меню;

Установка завершена. Если у вас возникли вопросы, которые не затрагивались в документации, спрашивайте в комментариях к товару.